import 'package:flutter/material.dart';
import 'package:iphonexsocialapp/two_line_item.dart';
import 'package:iphonexsocialapp/values/assets.dart';

import 'model/pofile.dart';

class ProfilePageView extends StatefulWidget {
  PageController _pageController = PageController(initialPage: 0);
  double opacity = 0.2;

  @override
  _ProfilePageViewState createState() => _ProfilePageViewState();
}

class _ProfilePageViewState extends State<ProfilePageView>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation _sliderAnimation;
  Animation _fadeAnimation;

  int currentIndex =0;
  @override
  void initState() {
    //动画延时
    _controller = AnimationController(vsync: this,duration: const Duration(milliseconds: 300));
    //weight:500 的5%
    _sliderAnimation  = TweenSequence(
      [
        TweenSequenceItem<Offset>(weight: 20,tween: Tween(begin: Offset(0, 0),end: Offset(0, 1))), //使用百分之五向下移动
        TweenSequenceItem(weight: 80,tween: Tween(begin: Offset(0,1),end: Offset(0,0))) //使用95%向上移动
      ]).animate(_controller);

    _fadeAnimation = TweenSequence([
      TweenSequenceItem<double>(weight: 10,tween: Tween(begin: 1,end: 0)),
      TweenSequenceItem<double>(weight: 90,tween: Tween(begin: 0,end: 1))
    ]).animate(_controller);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    /*
    return Image.asset(Assets.GENA_SEDWICK,
      fit:BoxFit.cover,colorBlendMode: BlendMode.hue,color: Colors.black,
      height: 600,);
  }
  */
    return Stack(
      children:<Widget>[
        PageView.builder(
        itemBuilder: (context, index) {
          return Stack(fit: StackFit.expand, children: <Widget>[
            Image.asset(
              profiles[index].imagePath,
              fit: BoxFit.cover,
              colorBlendMode: BlendMode.hue,
              color: Colors.black,
              height: 600,
            ),
            DecoratedBox(
              decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
                  Colors.black.withOpacity(widget.opacity),
                  Colors.white.withOpacity(widget.opacity),
                  Colors.black.withOpacity(widget.opacity)
                ], begin: Alignment.bottomCenter, end: Alignment.topCenter),
              ),
            ),
          ]);
        },
        itemCount: profiles.length,
        controller: widget._pageController,
        pageSnapping: true,
        onPageChanged: (index){
          _controller.reset();
          _controller.forward();
          setState(() {
            currentIndex = index;
          });
        },
      ),
        Positioned(
          left: 20,
          bottom: 45,
          right: 20,
          child:ProfileDetails(index: currentIndex,sliderAnimation: _sliderAnimation,
          fadeAnimation: _fadeAnimation,),) ,
      ]
    );
  }
}

class ProfileDetails extends StatelessWidget {
  final int index;
  final  Animation sliderAnimation;
  final Animation fadeAnimation;

  ProfileDetails({this.index,@required this.sliderAnimation,this.fadeAnimation});

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: fadeAnimation,
      child: SlideTransition(
        position:sliderAnimation ,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            TwoLineItem(
              firstText: profiles[index].following.toString(),
              secondText: 'following',
              crossAxisAlignment: CrossAxisAlignment.start,
            ),
            TwoLineItem(
              firstText: profiles[index].posts.toString(),
              secondText: 'posts',
              crossAxisAlignment: CrossAxisAlignment.center,
            ),
            TwoLineItem(
              firstText: profiles[index].followers.toString(),
              secondText: 'followers',
              crossAxisAlignment: CrossAxisAlignment.end,
            )
          ],
        ),
      ),
    );
  }
}

